<template>
  <div>
    <el-dialog  
        v-bind="$attrs" 
        v-on="$listeners"
        :visible="Visible"
        width="40%"
        custom-class="dialog"
        :modal-append-to-body='false'
        append-to-body
        @close="close" 
        :title="formListTitle"
        :destroy-on-close='true'
        :close-on-click-modal='false'
        :close-on-press-escape='false'
        :center='true'
        >
        <el-form ref="wareHouseManageForm" :model="formListData" :rules="rules" label-width="100px">
            <el-form-item label="仓库名称" prop="name">
                <el-input v-model="formListData.name" placeholder="请输入仓库名称" clearable :style="{width: '95%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="存储空间" prop="upperlimit">
                <el-input v-model="formListData.upperlimit" placeholder="请输入存储上限" clearable :style="{width: '95%'}"

                >
                </el-input>
            </el-form-item>
            <el-form-item label="仓库启用">
                <el-switch
                v-model="formListData.isEnable"
                active-color="#67C23A"
                inactive-color="#C0C4CC">
                </el-switch>
            </el-form-item>
        </el-form>
       
        <div slot="footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="handelConfirm" :loading="isloading">确定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    Visible:Boolean,
    editMark:Boolean,
    listData:Object,
  },
  components: {

  },
  data() {
    const blurText = async(rule, value, callback) => {  
        const boolean = new RegExp('^[1-9][0-9]*$').test(value)
        if (!boolean) {
          callback(new Error('输入必须为整数'))
        }else if(Number(value)<100){
          callback(new Error('输入必须大于等于100'))
        }else if(Number(value)>99999){
          callback(new Error('输入必须小于等于99999'))
        }else{
          callback()
        }
   　}
    return {
      title:'',
      isloading:false,
      inheritAttrs: false,
      formData: {
        isEnable:true
      },
      rules: {
        name: [{
          required: true,
          message: '请输入仓库名称',
          trigger: 'change'
        }],
        upperlimit: [{
          required: true,
          message: '',
          trigger: 'change',
          validator: blurText
        }]
        
      },
    };
  },
  computed:{
      formListData(){
          if(this.editMark){
              this.formData = this.listData
              this.formData.upperlimit = this.listData.upperlimit+''
              return this.formData
          }
          return this.formData
      },
      formListTitle(){
          if(this.editMark){
              return this.title = '编辑'
          }
          return this.title = '新增'
      },
  },
  created() {
  },
  mounted() {
  },
  beforeDestroy() {
    this.$off()
  },
  methods: {
 
    close() {
      this.$emit('close')
    },
    handelConfirm() {
      this.$refs['wareHouseManageForm'].validate(valid => {
        if (valid&&!this.isloading){
          this.isloading=true
            this.editMark?this.saveData(true):this.saveData(false)
            console.log(this.formData);
        }else{
            this.$utils.message.warning(this,'请填写完整信息')
            return false;
        }
        
      })
    },
    saveData(flag){
        const query = this.$Bmob.Query('wareHouse')
        flag?query.set('id', this.listData.objectId):null
        query.set('name',this.formData.name)
        query.set('upperlimit',Number(this.formData.upperlimit))
        query.set('isEnable',this.formData.isEnable)
        query.save().then(res=>{
            this.$emit('save')
            this.isloading=false
            this.close()
            this.$utils.message.success(this,'保存成功')
        }).catch(err=>{
            console.log(err);
            this.isloading=false
            this.$utils.message.error(this,'保存失败')
        })
    },
  },
};
</script>

<style scoped lang="scss">
/deep/.el-dialog {
    border-radius: 15px;
    z-index: 5;
    min-width: 320px;  
    margin-top: 15vh !important;
}
</style>



